import React from "react";
import styles from "./index.module.less";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
import Nav from "@pages/nav";
import PortalContainer from "@components/portalContainer";

const asideNav = [
    { path: "/my/wallet", text: "我的钱包" },
    { path: "/my/rechargeRecord", text: "充值记录" },
    { path: "/my/consumerDetails", text: "消费明细" },
    { path: "/my/goods", text: "我的商品" },
    { path: "/my/goodsAnalysis", text: "卖家解析" },
    { path: "/my/buyRecords", text: "购买记录" },
];

const My = () => {
    const local = useLocation();
    const navigate = useNavigate();

    return (
        <div className={styles.my}>
            <Nav />
            <main className={styles.my_main}>
                <aside className={styles.my_aside}>
                    <ul className={styles.aside_ul}>
                        {asideNav.map((item, index) => {
                            return (
                                <li
                                    key={item.path}
                                    className={`${
                                        item.path === local.pathname
                                            ? `${styles.active}`
                                            : ""
                                    }`}
                                    onClick={() => {
                                        navigate(item.path);
                                    }}
                                >
                                    {item.text}
                                </li>
                            );
                        })}
                    </ul>
                </aside>
                <section className={styles.my_section}>
                    <Outlet />
                </section>
            </main>
            <PortalContainer />
        </div>
    );
};

export default My;
